<template>
    <el-dialog :model-value="isShowDialog" :title="title" width="1000" :before-close="handleClose" destroy-on-close>
        <el-form ref="FormRef" :model="ruleForm" :rules="rules" label-width="120">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="name" label="站点名称：">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="id" label="站点id：">
                        <el-input :disabled="disabled" v-model="ruleForm.id"></el-input>
                    </el-form-item>
                    <el-form-item prop="city" label="所属城市：">
                        <el-input v-model="ruleForm.city"></el-input>
                    </el-form-item>
                    <el-form-item prop="person" label="站点负责人：">
                        <el-input v-model="ruleForm.person"></el-input>
                    </el-form-item>
                    <el-form-item prop="tel" label="负责人电话：">
                        <el-input v-model="ruleForm.tel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="fast" label="快充数：">
                        <el-input v-model="ruleForm.fast"></el-input>
                    </el-form-item>
                    <el-form-item prop="slow" label="慢充数：">
                        <el-input v-model="ruleForm.slow"></el-input>
                    </el-form-item>
                    <el-form-item prop="status" label="充电站状态：">
                        <el-select :disabled="disabled" v-model="ruleForm.status" placeholder="充电桩使用状态">
                            <el-option label="全部" :value="1"></el-option>
                            <el-option label="使用中" :value="3"></el-option>
                            <el-option label="空闲中" :value="2"></el-option>
                            <el-option label="维护中" :value="4"></el-option>
                            <el-option label="待修中" :value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="now" label="正在充电：">
                        <el-input :disabled="disabled" v-model="ruleForm.now"></el-input>
                    </el-form-item>
                    <el-form-item prop="fault" label="故障数：">
                        <el-input :disabled="disabled" v-model="ruleForm.fault"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleFormData">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<!--
理解需求是通过父组件和子组件进行双向绑定
-->

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { defineProps, defineEmits, ref, watch } from 'vue'
import type { RowType } from '@/type/station'
import { storeToRefs } from 'pinia'
import { useStationStore } from '@/store/station'
import { editStationAPI } from '@/api/chargingstation'
const stationStore = useStationStore()
const { rowData } = storeToRefs(stationStore)
const disabled = ref<boolean>(true)
const props = defineProps({
    isShowDialog: {
        type: Boolean,
        required: true
    }
})
const title = ref<string>('')
const FormRef = ref<FormInstance>()
const ruleForm = ref<RowType>({
    name: "",
    id: "",
    city: "",
    fast: "",
    slow: "",
    status: 1,
    now: "",
    fault: "",
    person: "",
    tel: ""
})
const rules = ref<FormRules<RowType>>({
    name: [
        { required: true, message: "站点名称不可以为空", trigger: 'blur' }
    ],
    id: [
        { required: true, message: "id不可以为空", trigger: "blur" }
    ],
    city: [
        { required: true, message: '城市信息不可以为空', trigger: 'blur' }
    ],
    fast: [
        { required: true, message: '快充数据不可以为空', trigger: 'blur' }
    ],
    slow: [
        { required: true, message: '慢充数据不可以为空', trigger: 'blur' }
    ],
    fault: [
        { required: true, message: '故障数据不可以为空', trigger: 'blur' }
    ],
    person: [
        { required: true, message: '负责人不可以为空', trigger: 'blur' }
    ],
    tel: [
        { required: true, message: '电话不可以为空', trigger: 'blur' }
    ],
    now: [
        { required: true, message: '充电状态不可以为空', trigger: 'blur' }
    ],

})
// 子传父
const emit = defineEmits(['close', 'reload'])
// 可以监听visible的变化
watch(() => props.isShowDialog, () => {
    if (rowData.value.name) {
        disabled.value = true
        title.value = '编辑充电站'
    } else {
        disabled.value = false
        title.value = '新增充电站'
    }
    ruleForm.value = rowData.value
})

const handleClose = () => {
    emit('close')
}
const handleFormData = () => {
    FormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            const res = await editStationAPI(ruleForm.value)
            ElMessage({
                message: res.data,
                type: 'success',
            })
            handleClose()
            emit('reload')
        }
    })
}
</script>